<template>
  <div class="row-two">
    <!-- 左边饼图 订单统计 -->
    <div class="left">
      <!-- 顶部标题栏 -->
      <div class="header">
        <!-- 左侧标题加图标 -->
        <div class="title">
          <el-icon><Memo /></el-icon>
          <span>订单统计</span>
        </div>
      </div>
      <!-- 饼图 -->
      <PieChart :data="orderPieChartData" />
    </div>

    <!-- 中间饼图 救援任务统计 -->
    <div class="middle">
      <!-- 顶部标题栏 -->
      <div class="header">
        <!-- 左侧标题加图标 -->
        <div class="title">
          <el-icon><Memo /></el-icon>
          <span>救援任务统计</span>
        </div>
      </div>

      <!-- 饼图 -->
      <PieChart :data="rescuePieChartData" />
    </div>

    <!-- 右边饼图 用户概览 -->
    <div class="right">
      <!-- 顶部标题栏 -->
      <div class="header">
        <!-- 左侧标题加图标 -->
        <div class="title">
          <el-icon><Memo /></el-icon>
          <span>用户概览</span>
        </div>
      </div>

      <!-- 底部商户数 新增用户数 累计用户数 -->
      <div class="bottom">
        <!-- 商户数 -->
        <div class="item">
          <span>商户数</span>
          <span>{{ merchantCount }}</span>
        </div>
        <!-- 新增用户数 -->
        <div class="item">
          <span>新增用户数</span>
          <span>{{ newUserCount }}</span>
        </div>
        <!-- 累计用户数 -->
        <div class="item">
          <span>累计用户数</span>
          <span>{{ totalUserCount }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onUnmounted, onMounted } from "vue";
import PieChart from "./PieChart.vue";
import { getRowTwoDataApi } from "@/api/dashboard/dashboard";

//商户数
const merchantCount = ref(100);
//新增用户数
const newUserCount = ref(40);
//累计用户数
const totalUserCount = ref(140);
//订单统计饼图数据
const orderPieChartData = ref([
  { value: 1048, name: "维修类" },
  { value: 735, name: "救援类" },
  { value: 580, name: "送水类" },
  { value: 484, name: "送餐类" },
  { value: 300, name: "其他类" },
]);
//救援任务统计饼图数据
const rescuePieChartData = ref([
  { value: 1048, name: "待处理" },
  { value: 735, name: "已完成" },
]);

// 页面加载时 发请求 获取数据
onMounted(() => {
  getRowTwoDataApi()
    .then((res) => {
      console.log("RowTwo组件 获取到的接口数据:", res.data);

      //订单统计 饼图赋值
      orderPieChartData.value = res.data.orderCountList;
      //救援任务统计 饼图赋值
      rescuePieChartData.value = res.data.rescueTaskCountList;
      //用户概况 累计用户数 和累计商户数赋值
      totalUserCount.value = res.data.userTotalCount;
      merchantCount.value = res.data.merchantTotalCount;
    })
    .catch((err) => {
      console.log(err);
    });
});

//start 订阅RowOne组件传递的消息 新增用户数================================
import emitter from "@/utils/emitter";

//绑定事件 以及事件触发函数
emitter.on("sendUserCount", (newCount) => {
  console.log("RowTwo组件 收到RowOne组件传递的新增用户数消息:", newCount);
  newUserCount.value = newCount;
});

//页面卸载后 清理绑定事件，不让他占用内存，不然会一直存在内存当中
onUnmounted(() => {
  emitter.off("sendUserCount");
});
//end 订阅RowOne组件传递的消息 新增用户数================================
</script>

<style scoped lang="scss">
.row-two {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 20px;
  height: 300px;

  display: flex;
  justify-content: flex-start;
  gap: 20px;

  /**左侧 中间饼图部分 */
  .left,
  .middle {
    width: 23%;
    background-color: #fff;
    box-sizing: border-box;
    padding: 10px;
    overflow: hidden;
  }

  /**右侧 用户概览部分 */
  .right {
    flex: 1;
    background-color: #fff;
    box-sizing: border-box;
    padding: 10px;

    .bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 150px;
      box-sizing: border-box;
      .item {
        width: 30%;
        height: 100%;
        border-radius: 15px;
        background-color: palegoldenrod;
        box-sizing: border-box;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 20px;
        font-size: 16px;
        font-weight: 600;
        color: #333;
      }
    }
  }
}

/**标题部分样式 */
.header {
  display: flex;
  align-items: center;
  height: 40px;
  box-sizing: border-box;
  border-bottom: 1px solid #333;
  padding-bottom: 15px;
  margin-bottom: 20px;

  .title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
  }
}
</style>
